<template>
  <div class="container">
    <h1>订单管理</h1>
    <form @submit.prevent="search">
      <div class="form-group-inline">
        <div class="form-group">
          <label for="waybillNumber">订单编号：</label>
          <input id="waybillNumber" v-model="waybillNumber" type="text" required>
        </div>
        <div class="form-group">
          <label for="dispatchStatus">订单状态：</label>
          <select id="dispatchStatus" v-model="dispatchStatus" required>
            <option value="">请选择</option>
            <option value="dispatched">已关闭</option>
            <option value="in_transit">待取件</option>
            <option value="delivered">已取件</option>
            <option value="delivered">网点自寄</option>

          </select>
        </div>
        <div class="form-group">
          <label for="dispatchStatus">付费状态：</label>
          <select id="dispatchStatus" v-model="dispatchStatus" required>
            <option value="">请选择</option>
            <option value="dispatched">预结</option>
            <option value="in_transit">到付</option>
            <option value="delivered">未付</option>
            <option value="delivered">已付</option>

          </select>
        </div>
      </div>
      <div class="form-group-inline">
        <div class="form-group">
          <label for="senderName">发件人姓名：</label>
          <input id="senderName" v-model="senderName" type="text" required>
        </div>
        <div class="form-group">
          <label for="senderPhone">发件人电话：</label>
          <input id="senderPhone" v-model="senderPhone" type="text" required>
        </div>
        <div class="form-group">
          <label for="senderAddress">发件人地址：</label>
          <select id="senderProvince" v-model="selectedSenderProvince">
            <option value="">请选择省</option>
            <option v-for="province in provinces" :key="province.id" :value="province">{{ province.name }}</option>
          </select>
          <select id="senderCity" v-model="selectedSenderCity" :disabled="!selectedSenderProvince">
            <option value="">请选择市</option>
            <option v-for="city in cities" :key="city.id" :value="city">{{ city.name }}</option>
          </select>
          <select id="senderDistrict" v-model="selectedSenderDistrict" :disabled="!selectedSenderCity">
            <option value="">请选择区</option>
            <option v-for="district in districts" :key="district" :value="district">{{ district }}</option>
          </select>
        </div>
      </div>
      <div class="form-group-inline">
        <div class="form-group">
          <label for="receiverName">收件人姓名：</label>
          <input id="receiverName" v-model="receiverName" type="text" required>
        </div>
        <div class="form-group">
          <label for="receiverPhone">收件人电话：</label>
          <input id="receiverPhone" v-model="receiverPhone" type="text" required>
        </div>
        <div class="form-group">
          <label for="receiverAddress">收件人地址：</label>
          <select id="receiverProvince" v-model="selectedReceiverProvince">
            <option value="">请选择省</option>
            <option v-for="province1 in receiverProvinces" :key="province1.id" :value="province">{{ province1.name }}</option>
          </select>
          <select id="receiverCity" v-model="selectedReceiverCity" :disabled="!selectedReceiverProvince">
            <option value="">请选择市</option>
            <option v-for="city1 in receiverCities" :key="city1" :value="city">{{ city1 }}</option>
          </select>
          <select id="receiverDistrict" v-model="selectedReceiverDistrict" :disabled="!selectedReceiverCity">
            <option value="">请选择区</option>
            <option v-for="district1 in receiverDistricts" :key="district1" :value="district">{{ district1 }}</option>
          </select>
        </div>
      </div>
      <div class="form-group">
        <el-row>
          <el-button type="danger" @click="search">搜索</el-button>
          <el-button @click="resetForm">重置</el-button>

        </el-row>
        <!-- <button type="submit">搜索</button>
        <button type="button" @click="resetForm">重置</button> -->
      </div>

      <div>
        <el-table :data="tableData" style="width: 100%">
          <el-table-column label="序号" width="80">
            <template slot-scope="scope">
              {{ scope.$index + 1 }}
            </template>
          </el-table-column>
          <el-table-column label="订单编号" prop="memberId" />
          <el-table-column label="运单编号" prop="orderNumber" />
          <el-table-column label="下单时间" prop="createTime" />
          <el-table-column label="订单状态" prop="status" />
          <el-table-column label="发件人姓名" prop="senderName" />
          <el-table-column label="发件人电话" prop="senderPhone" />
          <el-table-column label="发件人地址" prop="senderAddress" />
          <el-table-column label="收件人姓名" prop="receiverName" />
          <el-table-column label="收件人电话" prop="receiverPhone" />
          <el-table-column label="收件人地址" prop="receiverAddress" />
          <el-table-column label="取件类型" prop="pickupType" />
          <el-table-column label="付费类型" prop="paymentMethod" />

          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                type="primary"
                size="small"
                @click="viewDetails(scope.row)"
              >
                查看详情
              </el-button>

            </template>
          </el-table-column>
        </el-table>
      </div>
    </form>
    <div v-if="searched">
      <h2>查询结果：</h2>
      <p>运单编号：{{ waybillNumber }}</p>
      <p>订单编号：{{ orderNumber }}</p>
      <p>调度状态：{{ dispatchStatus }}</p>
      <p>起始地机构：{{ origin }}</p>
      <p>目的地机构：{{ destination }}</p>
      <p>当前所在机构：{{ currentLocation }}</p>
    </div>
    <div>
      <!-- 分页模块 -->
      <div class="pagination">
        <span>共 {{ params.pages }} 条</span>
        <span>
          每页条数：
          <el-select v-model="itemsPerPage" @change="handleItemsPerPageChange">
            <el-option
              v-for="option in itemsPerPageOptions"
              :key="option.value"
              :label="option.label"
              :value="option.value"
            />
          </el-select>
        </span>
        <el-pagination
          :current-page="params.page"
          :page-size="params.pageSize"
          :total="params.pages"
          layout="prev, pager, next"
          @current-change="handlePageChange"
        />
        <span>前往</span>
        <el-input-number v-model="goToPageInput" :min="1" :max="totalPages" @change="goToPageButton" />
        <span>页</span>
      </div>
    </div>
  </div>
</template>
<script>
import { getOrderList, fetchProvinces } from '@/api/order'
import { getEmployeeDetail } from '@/api/order'

export default {
  data() {
    return {

      province: '',
      receiverName: '',
      receiverPhone: '',
      selectedSenderProvince: '',
      selectedSenderCity: '',
      selectedSenderDistrict: '',
      senderPhone: '',
      senderName: '',
      params: {
        page: 1,
        pageSize: 20,
        pages: 52

      },
      itemsPerPageOptions: [
        { label: '10条/页', value: 10 },
        { label: '20条/页', value: 20 },
        { label: '30条/页', value: 30 }
      ],
      totalItems: 23, // 总数据条数
      itemsPerPage: 10,
      goToPageInput: null,

      selectedProvince: '',
      selectedCity: '',
      selectedDistrict: '',
      provinces: [
        {
          name: ''
        }
      ], // 省份选项
      cities: [
        { name: '' }
      ], // 根据所选省份动态加载的城市选项
      districts: [], // 根据所选城市动态加载的区选项

      // 其他数据...
      selectedReceiverProvince: '',
      selectedReceiverCity: '',
      selectedReceiverDistrict: '',
      receiverProvinces: [
        {
          name: ''
        }
      ], // 收件人省份选项
      receiverCities: [], // 根据所选收件人省份动态加载的城市选项
      receiverDistricts: [], // 根据所选收件人城市动态加载的区选项
      // 其他数据...

      tableData: [
        {
          id: 1,
          memberId: '',
          orderNumber: '',
          createTime: '',
          status: '',
          senderName: '',
          senderPhone: '',
          senderAddress: '',
          receiverName: '',
          receiverPhone: '',
          receiverAddress: '',
          pickupType: '',
          paymentMethod: ''
        }
        // 添加更多数据行...
      ],
      waybillNumber: '',
      orderNumber: '',
      dispatchStatus: '',
      origin: '',
      destination: '',
      currentLocation: '',
      searched: false
    }
  },
  computed: {
    totalPages() {
      return Math.ceil(this.pages / this.itemsPerPage)
    }
  },
  watch: {
    selectedProvince(newProvince) {
      // 根据所选的省份（newProvince），动态更新城市选项
      // 例如，从后端获取相应省份下的城市数据，并将其赋值给this.cities
    },
    selectedCity(newCity) {
      // 根据所选的城市（newCity），动态更新区选项
      // 例如，从后端获取相应城市下的区数据，并将其赋值给this.districts
    }
  },
  mounted() {
    this.getOrderList() // 在组件加载时获取订单列表数据
    this.fetchProvinces()
  },
  methods: {
    async fetchProvinces() {
      const { data } = await fetchProvinces()
      console.log(data)
      this.provinces = data
      this.receiverProvinces = data
    },
    search() {
      // 查询操作
      // 模拟赋值查询结果
      this.searched = true
      this.waybillNumber = 'SL1000000001212'
      this.orderNumber = '1608062099177144321'
      this.dispatchStatus = '已调度'
      this.origin = '皇姑区营业部'
      this.destination = '武昌营业部'
      this.currentLocation = '武昌营业部'
    },
    async getOrderList() {
      const { data } = await getOrderList(this.params)
      // console.log(res)
      // console.log(data.items[0].receiverCity.name)
      this.tableData = data.items
      console.log(data.items.senderCity)
      // this.cities = data.items.senderCity
    },
    async getEmployeeDetail() {
      const res = await getEmployeeDetail(this.$route.params.id)
      // this.order.pickupType = Number(data.pickupType)
      console.log(res)
      // this.order = data
    },
    handlePageChange(page) {
      // this.currentPage = page
      this.params.page = page
      this.getOrderList()
    },
    handleItemsPerPageChange() {
      this.page = 1
      this.params.pageSize = this.itemsPerPage
      this.getOrderList()
    },
    goToPageButton() {
      if (this.goToPageInput >= 1 && this.goToPageInput <= this.totalPages) {
        this.currentPage = this.goToPageInput
      }
    },
    viewDetails(row) {
      // 执行查看详情操作，可以根据需要访问特定的行数据
      console.log('查看详情:', row)
      this.$router.push(`/nested/menu1/detail/${row.id}`)
    },
    resetForm() {
      this.waybillNumber = ''
      this.orderNumber = ''
      this.dispatchStatus = ''
      this.origin = ''
      this.destination = ''
      this.currentLocation = ''
      this.searched = false
    },
    handleClick(status) {
      // 处理点击事件的逻辑
      console.log(`点击了状态: ${status}`)
      // 在这里可以编写逻辑来处理点击事件
    }

  }
}
</script>
<style>
.container {
  /* max-width: 1600px; */
  margin: 0 auto;
  padding: 20px;
}

h1, h2 {
  color: #333;
}

.form-group {
  margin-bottom: 10px;
}

.form-group-inline {
  display: flex;
  align-items: center;
}

.form-group-inline > .form-group {
  margin-right: 20px;  /* 调整列间距 */
}

label {
  display: inline-block;
  width: 150px;
}

input[type="text"],
select {
  width: 200px;
  padding: 5px;
}

button {
  padding: 5px 10px;
  margin-right: 10px;
}
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 10px;
}

</style>
